/*css-reset*/
*{
    margin : 0;
    padding : 0;
    box-sizing: border-box;
}

*::before{
    margin : 0;
    padding : 0;
    box-sizing: border-box;
}

*::after{
    margin : 0;
    padding : 0;
    box-sizing: border-box;
}


/*
* word-break: break-all 可以用于防止折行
* 原视频是<div id="demo">，但在写的时候无此必要，直接在html中指定之就可以
*/
#html{
    word-break : break-all;
}

#div1{
    position : fixed;
    right : 0;
    top : 0;
}

#div1::before{
    content : '';
    display: block;
    position : absolute;
    border : 1px solid #000000;
}

#div1::after{
    content : '';
    display: block;
    position : absolute;
    border : 1px solid #fff;
}

/*用屏幕宽度断定是否为手机*/

@media(max-width : 500px){

    #html{
        height : 50vh;
        overflow : auto;
    }

    #div1Wrapper{
        height : 50vh;
    }

    #div1{
        position : relative;
        top : 0;
        right : 0;
    }
}

/* rotating */
@-webkit-keyframes rotate{
    from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{
    from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{
    from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{
    from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}